<template>
  <div class="TheValueOfPatents clearfix">
    <!-- <h2>
      {{ patent.Header && patent.Header.ApplNO }}&nbsp;&nbsp;&nbsp;&nbsp;{{
        patent.Title
      }}
    </h2> -->
    <div class="charts-con">
      <div class="charts-main">
        <div class="charts-topbar">
          <span class="btns fr"> </span>
        </div>
        <div class="echarts h400">
          <div id="chartOne"></div>
        </div>
        <div class="charts-bottombar"></div>
      </div>
    </div>
    <div class="details">
      <p class="details-title">
        评估价值总分 : <span class="details-one">{{ Total }}</span
        ><span class="details-two"> / 100</span>
      </p>
      <div class="space-between details-con">
        <div
          class="details-main space-between"
          v-for="(item, i) in details"
          :key="i"
        >
          <div class="details-left">
            {{ item.title }}
          </div>
          <div class="details-right">
            <p class="detail-title">
              {{ item.name }} : <span class="detail-one">{{ item.value }}</span
              ><span class="detail-two"> / {{ item.sum }}</span>
            </p>
            <div class="schedule-con">
              <div
                class="schedule-now"
                :style="{ width: item.value + '%' }"
              ></div>
            </div>
            <p class="detail-info">
              {{ item.info }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "PatentValue",
  props: {
    publicInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      Total: 0,
      details: [
        {
          title: "Q",
          name: "专利质量",
          value: 0,
          sum: 100,
          info: "是从特征数量、权项数量、引用情况、稳定性等10个维度对专利质量进行评价。",
        },
        {
          title: "T",
          name: "技术质量",
          value: 0,
          sum: 100,
          info: "是从创新程度、技术时效、技术宽度、生命周期维度评价专利技术价值。",
        },
        {
          title: "M",
          name: "市场价值",
          value: 0,
          sum: 100,
          info: "是从投融资情况、行业基数、转让许可、质押融资、市场势能等维度评价市场价值。",
        },
        {
          title: "S",
          name: "社会价值",
          value: 0,
          sum: 100,
          info: "是从复审无效、焦点事件、政策法规等维度评价专利的社会价值。",
        },
      ],
      patent: {},
      chartOne: null,
      chartOneOption: {
        title: [
          {
            text: "0",
            left: "19%",
            bottom: "18%",
            textStyle: {
              fontSize: 16,
              color: "#2f41c8",
            },
          },
          {
            text: "0",
            right: "19%",
            bottom: "18%",
            textStyle: {
              fontSize: 16,
              color: "#2f41c8",
            },
          },
        ],
        series: [
          {
            name: "总分",
            type: "gauge",
            z: 1,
            min: 0,
            max: 100,
            radius: "100%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 14,
                color: [
                  [0.25, "#8ddcd9"],
                  [0.75, "#7ec0fd"],
                  [1, "#f77f7f"],
                ],
              },
            },
            axisTick: {
              // 坐标轴小标记
              length: 18, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            splitLine: {
              // 分隔线
              length: 22, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
              },
            },
            axisLabel: {
              color: "#b0b5ce",
            },
            pointer: {
              width: 4,
              length: "70%",
            },
            title: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              fontSize: 20,
              offsetCenter: [0, "-60%"],
            },
            detail: {
              fontSize: 48,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#2f41c8",
              offsetCenter: [0, "75%"],
            },
            data: [{ value: 0, name: "总分" }],
          },
          {
            name: "Q",
            type: "gauge",
            center: ["20%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 100,
            z: 1,
            startAngle: 155,
            endAngle: 25,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [
                  [0.25, "#8ddcd9"],
                  [0.75, "#7ec0fd"],
                  [1, "#f77f7f"],
                ],
              },
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 5,
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "100":
                    return "100";
                }
              },
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
              },
            },
            pointer: {
              width: 2,
              length: "70%",
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "-70%"],
            },
            detail: {
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#2f41c8",
              offsetCenter: [0, "-120%"],
            },
            data: [{ value: 0, name: "Q" }],
          },
          {
            name: "T",
            type: "gauge",
            center: ["20%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 100,
            z: 1,
            startAngle: 335,
            endAngle: 205,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [
                  [0.25, "#f77f7f"],
                  [0.75, "#7ec0fd"],
                  [1, "#8ddcd9"],
                ],
              },
            },
            axisTick: {
              // 坐标轴小标记
              show: false,
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "100";
                  case "100":
                    return "0";
                }
              },
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
              },
            },
            pointer: {
              width: 2,
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "70%"],
            },
            detail: {
              show: false,
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#2f41c8",
              offsetCenter: [0, "120%"],
            },
            data: [{ value: 0, name: "T" }],
          },
          {
            name: "M",
            type: "gauge",
            center: ["80%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 100,
            z: 1,
            startAngle: 155,
            endAngle: 25,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [
                  [0.25, "#8ddcd9"],
                  [0.75, "#7ec0fd"],
                  [1, "#f77f7f"],
                ],
              },
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 5,
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "100":
                    return "100";
                }
              },
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
              },
            },
            pointer: {
              width: 2,
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "-70%"],
            },
            detail: {
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#2f41c8",
              offsetCenter: [0, "-120%"],
            },
            data: [{ value: 0, name: "M" }],
          },
          {
            name: "S",
            type: "gauge",
            center: ["80%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 50,
            z: 1,
            startAngle: 335,
            endAngle: 205,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [
                  [0.25, "#f77f7f"],
                  [0.75, "#7ec0fd"],
                  [1, "#8ddcd9"],
                ],
              },
            },
            axisTick: {
              // 坐标轴小标记
              show: false,
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "100";
                  case "100":
                    return "0";
                }
              },
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
              },
            },
            pointer: {
              width: 2,
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "70%"],
            },
            detail: {
              show: false,
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#2f41c8",
              offsetCenter: [0, "120%"],
            },
            data: [{ value: 0, name: "S" }],
          },
          {
            name: "",
            z: 0,
            type: "pie",
            radius: ["35%", "35.8%"],
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              color: "rgba(200,200,200,0.2)",
              opacity: 1,
              shadowColor: "#000",
              shadowBlur: 15,
            },
            data: [{ value: 0, name: "" }],
          },
          {
            name: "",
            type: "pie",
            z: 2,
            radius: ["1%", "3%"],
            color: "#2f41c8",
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 0, name: "" }],
          },
          {
            name: "",
            type: "pie",
            z: 2,
            center: ["80%", "50%"],
            radius: ["1%", "3%"],
            color: "#2f41c8",
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 0, name: "" }],
          },
          {
            name: "",
            type: "pie",
            z: 2,
            center: ["20%", "50%"],
            radius: ["1%", "3%"],
            color: "#2f41c8",
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 0, name: "" }],
          },
        ],
      },
    };
  },
  methods: {
    /*
     * params: 无
     * return: 无
     * function: 获取PN号
     * */
    getPatentInfo() {
      // let spn = this.$route.query.pn;
      this.$post(this.$Url.patent.invokejson, {
        spn: this.publicInfo.pn,
        sl: "chs",
        sf: "ShowPatent",
        sx: "showpatent_cn",
      }).then((response) => {
        if (response.data && response.data.data && response.data.data.Patent) {
          this.patent = response.data.data.Patent;
        }
      });
    },
    getOneCharts() {
      // let ths = this;
      // let pn = ths.$route.query.pn;
      // this.$post(this.$Url.patent.valueanalysis2, {
      //   applyNum: this.publicInfo.pn,
      // })
      this.$get(`${this.$Url.patent.evaluate}`, {
        pn: this.publicInfo.pn,
      }).then(
        (res) => {
          const data = res.data;
          this.Total = Math.ceil(data.j);
          this.details[0].value = Math.ceil(data.q);
          this.details[1].value = Math.ceil(data.t);
          this.details[2].value = Math.ceil(data.m);
          this.details[3].value = Math.ceil(data.s);
          this.chartOne.setOption({
            title: [
              {
                text: Math.ceil(data.t),
                left: "19%",
                bottom: "18%",
                textStyle: {
                  fontSize: 16,
                  color: "#2f41c8",
                },
              },
              {
                text: Math.ceil(data.s),
                right: "19%",
                bottom: "18%",
                textStyle: {
                  fontSize: 16,
                  color: "#2f41c8",
                },
              },
            ],
            series: [
              {
                name: "总分",
                data: [
                  {
                    value: Math.ceil(data.j),
                    name: "总分",
                  },
                ],
              },
              {
                name: "Q",
                data: [{ value: Math.ceil(data.q), name: "Q" }],
              },
              {
                name: "T",
                data: [{ value: 100 - Math.ceil(data.t), name: "T" }],
              },
              {
                name: "M",
                data: [{ value: Math.ceil(data.m), name: "M" }],
              },
              {
                name: "S",
                data: [{ value: 50 - Math.ceil(data.s), name: "S" }],
              },
            ],
          });
        }
      );
    },
    chartsResize() {
      let ths = this,
        resizeTimer = null;
      $(window).on("resize", function () {
        if (resizeTimer) {
          clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function () {
          ths.chartOne.resize();
        }, 400);
      });
    },
    setChartOne(option) {
      this.chartOne.setOption(option, true);
    },
    getCharts() {
      this.chartOne = this.$echarts.init(document.getElementById("chartOne"));
    },
  },
  mounted: function () {
    //获取图表容器
    // this.getPatentInfo();
    this.getCharts();
    this.setChartOne(this.chartOneOption);
    this.getOneCharts();
    // 图表自适应
    this.chartsResize();
  },
};
</script>

<style scoped lang="scss">
.TheValueOfPatents {
  width: 1200px;
  // min-height: 800px;
  background-color: #fff;
  margin: 0 auto;
  // padding: 20px;
  box-sizing: border-box;
  // h2 {
  //   font-size: 24px;
  //   text-align: center;
  //   line-height: 80px;
  //   border-bottom: 1px solid #f0f1f3;
  // }
  .charts-con {
    width: 100%;
    background-color: #fff;
    // margin-top: 20px;
    .charts-title {
      font-size: 14px;
      font-weight: bold;
      line-height: 40px;
      background-color: #f9fbfd;
      border-bottom: 1px solid #f0f1f3;
      box-sizing: border-box;
      padding: 0 20px;
    }
    .charts-main {
      // padding: 20px;
      // background-color: #fff;
      // height: 435px;
      .echarts {
        width: 100%;
        position: relative;
      }
      .h320 {
        height: 320px;
      }
      .h550 {
        height: 550px;
      }
      .h400 {
        height: 400px;
      }
    }
    .el-select + .el-select {
      margin-left: 10px;
    }
  }
  .space-between {
    display: flex;
    justify-content: space-between;
  }
  .details {
    padding: 0 40px;
    .details-title {
      font-size: 18px;
      font-weight: bold;
      color: #000;
    }
    .details-con {
      background-color: #f9fafc;
    }
    .details-one {
      font-size: 40px;
      font-weight: bold;
      color: $mainColor;
    }
    .details-two {
      font-size: 20px;
      color: #9e9e9e;
    }
    .detail-title {
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-weight: bold;
      color: #000;
    }
    .detail-one {
      font-size: 20px;
      font-weight: bold;
      color: $mainColor;
    }
    .detail-two {
      font-size: 12px;
      color: #9e9e9e;
    }
    .schedule-con {
      height: 6px;
      background-color: #ebf1fc;
      border-radius: 3px;
      margin-top: 10px;
      .schedule-now {
        height: 6px;
        background-color: $mainColor;
        border-radius: 3px;
      }
    }
    .details-main {
      padding: 30px;
      .details-left {
        font-size: 40px;
        font-weight: bold;
        color: #9b9b9b;
        margin-right: 20px;
      }
    }
    .detail-info {
      font-size: 12px;
      color: #a5a5a5;
    }
  }
  #chartOne {
    width: 1200px;
    height: 400px;
  }
}
</style>
